<template>
  <div class="main-container h">
    <!-- 轮播图 -->

    <Banner :bannerData="bannerData" class="section vh banners" style="height:100vh" ref="banner"
      v-if="bannerData.length>0"
      :class="{banner:bg.banner,brand:bg.brand,products:bg.products,signup:bg.signup,news:bg.news,spirit:bg.spirit}" />
    <!-- 品牌荣誉 -->
    <Brand class="section vh banrds"
      :class="{banner:bg.banner,brand:bg.brand,products:bg.products,signup:bg.signup,news:bg.news,spirit:bg.spirit}" />

    <Products :artData="artData" class="section vh vhs productss"
      :class="{banner:bg.banner,brand:bg.brand,products:bg.products,signup:bg.signup,news:bg.news,spirit:bg.spirit}"
      v-if="artData.length >0" />
    <SignUp class="section vh signups"
      :class="{banner:bg.banner,brand:bg.brand,products:bg.products,signup:bg.signup,news:bg.news,spirit:bg.spirit}" />
    <News :dynamic="dynamic" class="section vh newss"
      :class="{banner:bg.banner,brand:bg.brand,products:bg.products,signup:bg.signup,news:bg.news,spirit:bg.spirit}" />
    <Spirit class="section vh spirits"
      :class="{banner:bg.banner,brand:bg.brand,products:bg.products,signup:bg.signup,news:bg.news,spirit:bg.spirit}" />
  </div>
</template>

<script>
import './css.css'
// components
//common


//content
import Banner from '@/components/content/banner/Banner.vue'//轮播图

//views 
import Brand from '@/views/home/main/Brand.vue' //品牌荣誉
import Products from '@/views/home/main/Products.vue'
import SignUp from '@/views/home/main/SignUp.vue'
import News from '@/views/home/main/News.vue'
import Spirit from '@/views/home/main/Spirit.vue'

import { getBanner } from '@/api/banner.js'
import { getArt, getDynamic } from '@/api/data'
export default {
  components: {
    Banner,
    Brand,
    Products,
    SignUp,
    News,
    Spirit
  },

  data () {
    return {
      currentScroll: null,
      options: {
        scrollBar: false,
        // anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7'],
        // scrollOverflow: true,
        afterLoad: this.afterLoad,
        // licenseKey: null
      },
      index: 1,
      headState: false,
      color: '#007455',
      bg: {
        banner: false,
        brand: false,
        products: false,
        signup: false,
        news: false,
        spirit: false
      },
      //轮播图数据
      bannerData: [],
      //艺术涂料数据
      artData: [],
      //动态数据
      dynamic: []
    }
  },
  methods: {
    async getData () {
      const { data: res } = await getBanner()
      this.bannerData = res.data
      console.log(res.data)
    },
    async getArtData () {
      const { data: res } = await getArt()
      console.log(res.art.arrData)

      this.artData = res.art.arrData.slice(0, 6)
      console.log(this.artData)
    },
    async getDynamicData () {
      const { data: res } = await getDynamic()
      this.dynamic = res.dynamic.arrData.slice(0, 6)
    },
    handleScroll () {
      this.currentScroll = window.pageYOffset
      var scroll = window.pageYOffset
      var hg = this.$refs.banner.$el.clientHeight
      // console.log(scroll <= hg)
      if (scroll <= hg * 0.4) {
        this.bg.banner = true
        this.bg.brand = false
        this.bg.products = false
        this.bg.signup = false
        this.bg.news = false
        this.bg.spirit = false
      } else if (scroll >= hg * 0.4 && scroll <= hg * 1.4) {
        this.bg.banner = false
        this.bg.brand = true
        this.bg.products = false
        this.bg.signup = false
        this.bg.news = false
        this.bg.spirit = false
      } else if (scroll >= hg * 1.4 && scroll <= hg * 2.4) {
        this.bg.banner = false
        this.bg.brand = false
        this.bg.products = true
        this.bg.signup = false
        this.bg.news = false
        this.bg.spirit = false
      } else if (scroll >= hg * 2.4 && scroll <= hg * 3.4) {
        this.bg.banner = false
        this.bg.brand = false
        this.bg.products = false
        this.bg.signup = true
        this.bg.news = false
        this.bg.spirit = false
      } else if (scroll >= hg * 3.4 && scroll <= hg * 4.4) {
        this.bg.banner = false
        this.bg.brand = false
        this.bg.products = false
        this.bg.signup = false
        this.bg.news = true
        this.bg.spirit = false
      } else if (scroll >= hg * 4.4 && scroll <= hg * 5.4) {
        this.bg.banner = false
        this.bg.brand = false
        this.bg.products = false
        this.bg.signup = false
        this.bg.news = false
        this.bg.spirit = true
      }
      if (scroll >= hg) {
        this.headState = true
        this.color = '#000'
      } else {
        this.headState = false
        this.color = '#007455'
      }
      this.$store.commit('navBg', this.headState)
      this.$store.commit('Color', this.color)
    },
    afterLoad (m, idx) {
      console.log(m)
      if (idx.index != 0) {
        this.headState = true
        this.color = '#000'
      } else {
        this.headState = false
        this.color = '#007455'
      }
      console.log(this.headState)
      console.log(this.color)
      this.$store.commit('navBg', this.headState)
      this.$store.commit('Color', this.color)
      console.log(this.$store.state.headState)
    }
  },
  created () {
    this.getData()
    this.getArtData()
    this.getDynamicData()

  },
  mounted () {
    console.log(this.bannerData)
    window.addEventListener("scroll", this.handleScroll, true);

  },
  updated () {
    this.handleScroll()
  }
}
</script>

<style lang='less' scoped>
.vh {
  min-height: 100vh;
}
.h {
  overflow: hidden;
  .banner {
    background: #267054 !important;
    transition: all 0.9s ease;
  }
  .brand {
    background: #3d0064 !important;
    transition: all 0.9s ease;
  }
  .products {
    background: #223c64 !important;
    transition: all 0.9s ease;
  }
  .signup {
    background: #81a837 !important;
    transition: all 0.9s ease;
  }
  .news {
    background: #6e0225 !important;
    transition: all 0.9s ease;
  }
  .spirit {
    background: #267054 !important;
    transition: all 0.9s ease;
  }
}
.main-container {
  background-color: #f4f4f4;
  transition: background-color 1s ease;
}
.banners {
  background: #267054;
}
.banrds {
  background: #267054;
}
.productss {
  background: #267054;
}
.signups {
  background: #267054;
}
.newss {
  background: #267054;
}
.spirits {
  background: #267054;
}

@media only screen and (max-width: 992px) {
  .vh.vhs {
    min-height: auto;
  }
}
</style>